<template>
  <tn-tabbar
    style="z-index: 1024; font-size: 31rpx"
    :height="height"
    v-model="currentTab"
    :list="tabbarList"
    :activeColor="activeColor"
    :inactiveColor="inactiveColor"
    :activeIconColor="activeIconColor"
    :backgroundColor="backgroundColor"
    :animation="animation"
    :safeAreaInsetBottom="safeAreaInsetBottom"
    :outHeight="outHeight"
    @change="handleChange"
    v-if="visible"
  >
  </tn-tabbar>
</template>

<script>
export default {
  name: "AppTabbar",
  props: {
    // 当前选中的索引
    value: {
      type: Number,
      default: 0,
    },
    // 是否显示
    visible: {
      type: Boolean,
      default: true,
    },
    // 底部导航栏高度
    height: {
      type: Number,
      default: 94,
    },
    // 底部导航栏列表
    list: {
      type: Array,
      default: () => [
        {
          title: "Galaxy Brand",
          activeIcon: "",
          inactiveIcon: "",
        },
        {
          title: "我的",
          activeIcon: "",
          inactiveIcon: "",
        },
      ],
    },
    // 激活颜色
    activeColor: {
      type: String,
      default: "#FFFFFF",
    },
    // 未激活颜色
    inactiveColor: {
      type: String,
      default: "#5D5A61",
    },
    // 激活图标颜色
    activeIconColor: {
      type: String,
      default: "#616DBA",
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: "#100d06",
    },
    // 是否开启动画
    animation: {
      type: Boolean,
      default: true,
    },
    // 是否适配底部安全区
    safeAreaInsetBottom: {
      type: Boolean,
      default: true,
    },
    // 外部高度
    outHeight: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      currentTab: this.value,
      tabbarList: this.list,
    }
  },
  watch: {
    value(newVal) {
      this.currentTab = newVal
    },
    list: {
      handler(newVal) {
        this.tabbarList = newVal
      },
      deep: true,
    },
  },
  methods: {
    handleChange(index) {
      this.currentTab = index
      switch (index) {
        case 0:
          uni.redirectTo({
            url: "/pages/galaxyBrand/index",
          })
          break
        case 1:
          uni.redirectTo({
            url: "/pages/mine/mine",
          })
          break
        default:
          break
      }
      this.$emit("input", index)
      this.$emit("change", index)
    },
  },
}
</script>
